import React,{Component} from "react";
import {Link} from "react-router-dom"
import "./styles/header.css";
import { connect } from "react-redux";
import { getUser,setUser } from "../auth";
import {actionCreators} from "../Login/store";
import { Button } from "antd";
const { loginIn,loginOut,loginRegister } = actionCreators;
@connect(
    state =>({...state.login}),
    { loginIn,loginOut,loginRegister }
)
export default class HeaderComponent extends  Component {
    constructor(props,context){
        super(props,context);
    }
    componentDidMount(){
        const user = getUser();
        if(user.userId){
            this.props.loginIn(true)
        }
    }

    LoginHeader = () =>{
        setUser({
            userName:null,
            userId:null,
            userAccount:null,
            userPhone:null,
            userPicture:null,
            userMail:null,
        });
        this.props.loginOut(false)
    };

    render() {

        return (
            <div className="header-link">
                <li>
                    <Link to='/'>首页</Link>
                </li>
                <li>
                    <Link to='/artlicelist'>文章</Link>
                </li>
                <li>
                    <Link to='/pigeonhole'>归档</Link>
                </li>
                <li>
                    <Link to='/about'>关于</Link>
                </li>
                <div>
                    {
                        this.props.login ? <Button onClick={this.LoginHeader}><i className = 'iconfont' >&#xe616;</i>退出</Button>:<Link to='/login'><i className = 'iconfont' >&#xe62e;</i>登录</Link>
                    }
                    {
                        this.props.login && this.props.login ?null : <Link to='/about'><i className = 'iconfont' >&#xe62d;</i>注册</Link>
                    }

                </div>
            </div>
        )
    }
}
